<template>
  <div>
    <!-- 头 -->
    <div class="heads">
      <h2>
        面签答题: <span>{{ tableData.custName }}</span>
        <!-- {{ tableData }} -->
      </h2>
    </div>
    <el-divider></el-divider>
    <!-- 表格 -->
    <div class="retrievetable">
      <el-table
        ref="multipleTable"
        :data="dataInfo.list"
        tooltip-effect="dark"
        style="width: 100%; font-size: 10px"
        @row-click="rowClick"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :row-style="tableRowClassName"
        border
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, index) in dataInfo.optionList"
          :key="index"
          :width="item.width"
        >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
        align="middle"
        style="height: 60px"
        v-if="dataInfo.paging"
      >
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="dataInfo.page.page"
          :page-size="dataInfo.page.pageSize"
          layout="total, prev, pager, next"
          :total="dataInfo.page.total"
          :small="true"
        >
        </el-pagination>
      </el-row>
    </div>

    <!-- 返回 -->
    <div class="footer-back">
      <el-button type="primary" @click="gobackanswer()" size="mini"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  gethistoryvideo,
  getqueryInfohistorylists
} from "@/api/hubeixiaojin/queryInfo";

export default {
  name: "loadnhistoryanswer",
  props: ["tableData", "option"],
  components: {},

  data() {
    // 表单身份证x`
    var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号不能为空!!"));
      }
      if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的证件号码！"));
      } else {
        callback();
      }
    };
    return {
      facevideo: {
        list: [
          {
            questionTitle: "题目1",
            questionContent: "题目内容1",
            questionType: "选择题",
            answer: "答案内容",
            userAnswer: "",
            answerOptions: ["一直", "不一致", "存疑"],
            remark: "http://www.w3school.com.cn/i/movie.mp4"
          }
        ],
        paging: false,
        page: {
          total: "",
          pageSize: 10,
          page: 1
        }
      },
      videoInfo: {
        src: "",
        msg: "您的浏览器不支持视频标签。"
      },
      //答题列表
      dataInfo: {
        list: [],
        paging: false,
        page: {
          total: "",
          pageSize: 10,
          page: 1
        },
        //表头
        optionList: [
          {
            label: "答题时间",
            prop: "answerTime"
          },
          {
            label: "客户名称",
            prop: "user.custName"
          },
          {
            label: "申请编号",
            prop: "user.applCde"
          },
          {
            label: "申请流水号",
            prop: "user.applCde"
          },
          {
            label: "进件通路",
            prop: "user.docChannel"
          },
          {
            label: "门店",
            prop: "user.cooprCde"
          },
          {
            label: "业务来源",
            prop: "user.sourceType"
          },
          {
            label: "客服名称",
            prop: "user.agentName"
          },
          {
            label: "题目内容",
            prop: "content"
          },
          {
            label: "客户回答",
            prop: "answerValueName"
          },
          {
            label: "题目类型",
            prop: "questionType"
          },
          {
            label: "得分",
            prop: "answerValue"
          },
          {
            label: "总分",
            prop: "answerTotalScore"
          },
          {
            label: "备注",
            prop: "remark"
          }
        ]
      },
      agentInfo: {
        //当前座席名字和id
        // dispatchingPerson: Constants.Agent.agentName,
        // dispatchingId: Constants.Agent.agentId,
        // //目标座席和id
        // agentId: "",
        // agentName: "",
        // //座席行政组
        // deptGroupName: Constants.Agent.deptGroupName,
        // //行政组code
        // deptGroupCode: Constants.Agent.deptGroupCode,
        // //access_token
        // access_token: Constants.Agent.access_token,
        // //tenantId
        // tenantId: Constants.Agent.tenantId,
        // //orgCode
        // orgCode: Constants.Agent.orgCode
      } //调单用到的座席信息
    };
  },
  mounted() {
    console.log("初始化");
    const sessionStr = sessionStorage.getItem("userInfo");
    const agentUser = JSON.parse(sessionStr);
    this.agentInfo = agentUser.content;
    this.getInfo(); //初始化拿数据
  },
  methods: {
    getInfo() {
      var params = {};
      var approvaResult = this.tableData.approvaResult;
      if (approvaResult == "3") {
        params = {
          condition: {
            applSeq: this.tableData.applSeq,
            id: this.tableData.id
          },
          sortCol: "id"
        };
      } else {
        params = {
          sortCol: "id",
          condition: {
            applSeq: this.tableData.applSeq
            // id: this.tableData.id
          }
        };
      }

      getqueryInfohistorylists(params, this.agentInfo)
        .then(res => {
          // console.log("答题信息=", res.data.data.listData);
          // this.dataInfo.list = res.data.data.listData
          var data = res.data.data.listData;
          var datas = [];
          var datalist = [];

          data.forEach(element => {
            // console.log("element==", element);

            if (element.listSessionDetail) {
              element.listSessionDetail.forEach(el => {
                datas.push(el.faceInteAnswHists);
              });
            }

            // datas.push(element.listSessionDetail);
          });
          datas.forEach(element => {
            datalist.push(...element);
          });
          datalist.forEach(element => {
            element.user = this.tableData;
          });

          this.dataInfo.list = datalist;
          this.dataInfo.page.total = datalist.length
          console.log("处理完毕", datalist);
        })
        .catch(err => {
          console.log(err);
        });
    },

    gobackanswer() {
      console.log("答题历史返回到列表首页");
      //返回数据搜索页
      this.$emit("gobackanswer");
    },
    // 分页
    handleCurrentChange(newPage) {
      console.log("分页", newPage);
    },
    rowClick(val) {
      console.log("行信息", val);
    }
  }
};
</script>

<style>
.footer-video {
  width: 100%;
  height: 300px;
  position: relative;
}
.fill-container {
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer-back {
  display: flex;
  justify-content: end;
}
.videobody {
  margin-top: 20px;
}
</style>
